<template>
  <div class="wrapper" :style="background">
    <div class="login-box" v-auto-animate>
      <!-- <div class="logo" v-if="domain_logo"><img :src="domain_logo" /></div> -->
      <div class="logo" text-40px mb-10>商城系统-运营后台</div>
      <a-form
        size="large"
        layout="vertical"
        :model="form"
        :style="{ width: '400px' }"
        @submit-success="handleSubmit"
      >
        <a-form-item
          :hide-asterisk="true"
          field="username"
          :rules="[REQUIRED, VARCHAR20]"
        >
          <a-input
            v-model="form.username"
            size="large"
            allow-clear
            placeholder="请输入用户名"
          >
            <template #prefix>
              <icon-user />
            </template>
          </a-input>
        </a-form-item>
        <a-form-item
          :hide-asterisk="true"
          field="password"
          :rules="[REQUIRED, VARCHAR20]"
        >
          <a-input-password
            v-model="form.password"
            value="large"
            allow-clear
            placeholder="请输入密码"
          >
            <template #prefix>
              <icon-lock />
            </template>
          </a-input-password>
        </a-form-item>

        <a-button
          html-type="submit"
          class="login"
          type="primary"
          :loading="loading"
          >登录</a-button
        >
      </a-form>
      <a-alert type="error" class="mt-5"
        >此登录仅开发环境可见, 若正式环境出现, 请联系开发人员</a-alert
      >
    </div>
    <!-- <div v-if="companyIcp" absolute bottom-20px>
      <div flex cursor-pointer gap-8px flex-a-c text-14px>
        ©{{ new Date().getFullYear() }}
        <a-link
          v-if="companyIcp"
          :hoverable="false"
          href="https://beian.miit.gov.cn/"
          target="_blank"
        >
          {{ companyIcp }}
        </a-link>
      </div>
    </div> -->
    <loginOrgSelect
      v-model:open="open"
      :tempToken="tempToken"
      @intoSystem="intoSystem"
    ></loginOrgSelect>
  </div>
</template>

<script setup lang="ts">
  import { Message } from '@arco-design/web-vue';
  import { onMounted, reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  /** 引入 api components  */
  import { getUserInfo, login, tempTokenGetToken } from '@/api/login';
  import { useAppStore, useUserStore } from '@/store';
  import getAssetsImages from '@/utils/assetsImages';
  import { md5 } from '@/utils/md5';
  import storage from '@/utils/storage';
  import { REQUIRED, VARCHAR20 } from '@/utils/validator';
  import loginOrgSelect from './loginOrgSelect.vue';

  import { initRouterNode } from '@/hooks/roleRouter';
  // const companyIcp = ref<any>('');
  const form = reactive({
    username: '',
    password: '',
  });
  const appStore: any = useAppStore();
  const loading = ref(false);

  const router = useRouter();
  const background = {
    background: `url(${getAssetsImages('wave.svg')}) no-repeat bottom`,
  };

  const open = ref(false);
  const tempToken = ref('');
  // 点击登录
  async function handleSubmit() {
    // verifyDom.value.init();
    try {
      const res = await login(form.username, form.password);
      if (res.data?.result?.tempToken) {
        // 多机构拦截一下
        open.value = true;
        tempToken.value = res.data?.result?.tempToken;
        return;
      }
      if (res.data.success) {
        Message.loading('验证成功!正在登录中...');
        await executeLogin(res);
      }
    } catch (error) {
      loading.value = false;
    }
  }

  // 验证成功之后执行登录方法
  async function executeLogin(res: any) {
    loading.value = true;
    console.log('马上就登录成功了', res);
    const { token } = res.data.result;
    storage.setAccessToken(token);
    // storage.setRefreshToken(refreshToken);

    const store = useUserStore();

    const storeInfo = await getUserInfo();
    store.userInfo = storeInfo.data.result.user;

    await initRouterNode(true);
    const { redirect, ...othersQuery } = router.currentRoute.value.query;

    await router.push({
      name: (redirect as string) || 'Workplace',
      query: {
        ...othersQuery,
      },
    });
  }

  // 选择机构
  function intoSystem(deptId) {
    console.log('进入系统', deptId);
    tempTokenGetToken({ tempToken: tempToken.value, deptId: deptId }).then(
      async (res: any) => {
        console.log('选择机构成功', res);
        Message.loading('验证成功!正在登录中...');
        await executeLogin(res);
      }
    );
  }

  onMounted(() => {
    appStore.route = [];
  });
</script>

<style lang="less" scoped>
  .wrapper {
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .login-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .arco-form-item {
    padding: 2px 0;
  }

  .login {
    margin-top: 20px;
  }

  .arco-input-wrapper,
  .arco-btn {
    height: 40px;
  }

  .verify {
    position: absolute;

    z-index: 10;
  }

  .logo {
    > img {
      min-width: 400px;
      max-width: 400px;
    }
  }
</style>
